'use client'
import { useState } from 'react'
import { cn } from '@/lib/css/util'

export function SwitchAnimate(){

    const [open, setOpen] = useState(false);

    return (
        <div className={'h-screen bg-black py-32'}>
            <div className={cn('w-36 h-20  mx-auto bg-[#2E4C43] rounded-[40px] relative flex items-center', open && 'bg-green-500')}
                 onClick={()=>setOpen(!open)}>
                <div className={cn('w-30 m-3 h-16 absolute left-0 duration-300', open && 'left-14')}>
                    <div className={'size-16 rounded-full bg-slate-100'}></div>
                </div>
            </div>
        </div>
    )
}
